<template>
  <el-container>
    <el-aside style="height: 100%; overflow-y: auto; width: 210px;" class="cus-scrollbar">
      <cus-menu></cus-menu>
    </el-aside>
    <el-main style="background-color: rgb(246, 247, 249); height: calc(100vh - 60px);">
      <el-card shadow="never" style="margin-bottom: 20px;" :body-style="{padding: '10px 20px'}">
        <el-page-header @back="$router.go(-1)" v-if="hasBack" :icon="ArrowLeft" title="返回" :content="content" />
        <span v-else style="font-size: 14px;">{{ content }}</span>
      </el-card>
      <el-card shadow="never" :body-style="{ height: 'calc(100vh - 205px)', overflow: 'auto' }">
        <router-view v-slot="{ Component }">
          <keep-alive :exclude="/^Inactive/">
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
  
  import { ArrowLeft } from '@element-plus/icons-vue'
  
  import {
    computed
  } from 'vue'
  
  import {
    useRoute
  } from 'vue-router'
  
  const route = useRoute();
  
  const content = computed(() => route.meta.name);
  const hasBack = computed(() => !route.meta.isMenu);
  
</script>
